
<template>
<div class=" login_page_from">

    <!-- 登录组件 -->

    <div class="page_from_head">
      
      <h2>登录后更精彩哦</h2>
      

      <span @click='login_cancel'>X</span>

    </div>

    <div class="page_from_button" @click='load()'>

      <router-link  active-class='button_active' key='index' :to="{path:'/'+login.path}" class='button_span' v-for='login in loginData'>

         {{login.name}}
      
      </router-link>

       <!-- <router-link :to="{path:'/login'}">

        <span data-num='1'class='button_active'>登录</span>

      </router-link> -->

     <!--   <router-link  active-class='button_active' v-for="(login,index) in loginData" :key='index'    >
           <span class=" ">{{login.name}}</span>
       </router-link> -->


    </div>

    <div class="page_from_icon">
      
      <p> 不用注册直接用社交号直接登录吧！</p>

      <div class="page_from_icon_wx"></div>

      <div class="page_from_icon_qq"></div>

      <div class="page_from_icon_sina"></div>

      <div class="clear"></div>
        
    </div>

    </div>

  </div>
</template>

<script>



export default {
  
    name:'clips_login',

    data(){

      return{

      		loginData:[

      			{
      				name:'注册',

      				path:'register'


      			},
      			{
      				name:'登录',

      				path:'login'
      			}


      		]
      }

    },
    methods:{

      load(){

            var login_page = document.querySelector('.clips_login_page');

            login_page.style.display = 'none';


        },
      login_cancel(){

      	   var login_page = document.querySelector('.clips_login_page');

            login_page.style.display = 'none';

        }


    }

  

}
</script>
<style type="text/css" scoped lang='less'>

.login_page_from{

    position: absolute;

    width:600/64rem;

    height: 445/64rem;

    background: white;

    border-radius: 10/64rem;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    margin: auto;

    .page_from_head{

    	position:relative;

        h2{

            font-size: 30/64rem;

            color: #434343;

            margin-top: 34/64rem ;

            text-align: center;

        }
        span{

        		height:30/64rem;

        		width:40/64rem;

        		display:block;

        		position:absolute;

        		background:skyblue;

        		color:white;

        		text-align:center;

        		top:0;

        		right:20/64rem;

        		cursor:pointer;

        }
     }
    .page_from_button{

        width: (600-80)/600*100%;

        margin: 0 auto;

        .button_span{

            cursor: pointer;

            display: inline-block;

            height: 90/64rem;

            width: 240/64rem;

            padding: 0;

            border:3/64rem solid rgb(165,75,232);

            margin-top: 36/64rem;

            border-radius: 10/64rem;

            font-size: 35/64rem;

            line-height: 90/64rem;

            text-align: center;

            color: rgb(165,75,232);

           &:last-child{

              margin-left:10/64rem;

           }

        }
        .button_active {

    		color: white;

            background:rgb(165,75,232);
     
        }

    }
    .page_from_icon {

        width: (500)/600*100%;

        margin: 60/64rem auto ;

        font-size: 30/64rem;

        p{ color: #a9a2b4;}
 
        .page_from_icon_wx{

          width: 105/64rem;

          height: 90/64rem;

          background: url('../../../../static/images/3/a微信-1.png') no-repeat;
          float: left;

          background-size: contain; 

          margin-top: 25/64rem;

        }
        .page_from_icon_qq{

            
          background: url('../../../../static/images/3/a朋友圈-1.png') no-repeat;

          background-size: contain; 

            width: 105/64rem;

            height: 90/64rem;

             float: left;

             margin-left: 90/64rem;

             margin-top: 25/64rem;

        }
        .page_from_icon_sina{

            background: url('../../../../static/images/3/a微博-1.png') no-repeat;

          background-size: contain; 

            width: 105/64rem;

             height: 90/64rem;

              float: left;

              margin-left: 90/64rem;

            margin-top: 25/64rem;
          

        }




    }
}
.clear{
  clear: both;
}

 
</style>